<template>

  <el-container class="con">
    <el-header>
      <top-bar
        :user-info="userInfo">
      </top-bar>
    </el-header>

    <el-container>
      <el-aside class="aside-con">
        <left-bar
          :user-info="userInfo"
          :menu="menu">
        </left-bar>
      </el-aside>
      <el-main class="container-main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
import TopBar from "./common/TopBar.vue";
import LeftBar from "./common/LeftBar.vue";
import { mapState } from 'vuex';

export default {
  data() {
    return {}
  },
  methods: {
  },
  components: {
    TopBar, LeftBar
  },
  computed: {
    ...mapState(['userInfo', 'menu'])
  }
}
</script>

<style scoped>
.el-container {
  /*height: 100%; 可以固定头部*/
  /*height: auto; 头部会跟随滚动*/
  height: 100%;
  overflow: hidden;
}
.con{
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
.con > .el-header{
  padding: 0;
}
.aside-con{
  width: 165px !important;
  height: 100%;
  margin: 0;
}
.aside-con .el-col{
  height: 100%;
}
.container-main{

}
</style>
